<script setup lang="ts">
import './node-style.scss'
import {inject, ref} from "vue";
import {Node} from "@antv/x6";
import {ModelApi, ModelVO} from "@/api/ai/model/model";
import {AiModelTypeEnum} from "@/views/ai/utils/constants";

const formData=reactive<any>({
  strategy:undefined,
  modelId:undefined,
  prompt:undefined,
  maxToken:undefined,
  key:undefined,
  jsonTemp:undefined,
})
const id=ref<string>()
const getNode=inject<()=>Node>('getNode')
if(getNode){
  const node=getNode()
  id.value=node.id
  node.setData(formData)
}
onBeforeMount(()=>{
  if(getNode){
    const node=getNode()
    const d=node.getData()
    console.log("node参数",d)
    if (d){
      Object.assign(formData,d)
    }else {
      node.setData(formData)
    }
  }
})
const models = ref([] as ModelVO[])
const init = async () => {
  models.value = await ModelApi.getModelSimpleList(AiModelTypeEnum.CHAT)
}
onMounted(() => {
  init()
})
watch(formData,()=>{
  if(getNode){
    const node=getNode()
    node.setData(formData)
  }
},{deep:true,immediate:false})
</script>

<template>
  <div class="node">
    <div class="node-title line5">
      <div class="flow-dot" magnet="true" :class="'flow-exec'" x-type="input-exec" :x-id="'input-exec_'+id"></div>
      <div>文档解析</div>
      <div class="flow-dot flow-right flow-exec" magnet="true" x-type="output-exec" :x-id="'output-exec_'+id"></div>
    </div>
    <div>
      <div class="line5">
        <div class="flow-dot flow-file" magnet="true" x-type="input-file" :x-id="'input-file'+id"></div>
        <div>文件</div>
      </div>
      <div class="line5">
        <div class="flow-right">文本分片</div>
        <div class="flow-dot flow-array" magnet="true" x-type="output-array-json" :x-id="'output-array-json_'+id" x-key="chunk_json"></div>
      </div>
      <div class="line5">
        <div class="flow-right">原文(仅ai策略输出)</div>
        <div class="flow-dot flow-string" magnet="true" x-type="output-string" :x-id="'output-string_'+id" x-key="text"></div>
      </div>
    </div>
    <div>
      <el-form
        :model="formData"
        label-position="top"
        @mousedown.stop
        @focus.stop
        style="cursor: default"
      >
        <el-form-item label="解析策略">
          <el-select v-model="formData.strategy" placeholder="解析策略">
            <el-option value="table" label="表格分行"/>
            <el-option value="paragraph" label="文本分段"/>
            <el-option value="ai_paragraph" label="智能分段"/>
          </el-select>
          <el-alert v-if="formData.strategy=='table'" title="按照表格的每一行进行分片。每个分片实体中，key是第一行表头的内容。如您的第一行为: 问题|答案|解释，则分片实体为 " description="{'问题':'xxx','答案':'xxx','解释':'xxx'}" />
          <el-alert v-if="formData.strategy=='paragraph'" :title="`按照文本内容的段落进行分片。每个分片实体中，key是您配置的。如您key配置了text,则分片实体为 `" description="{'text':'分片内容'}"/>
          <el-alert v-if="formData.strategy=='ai_paragraph'" title="根据你的提示词，输出JSON实体。你可以配置json案例，使ai更好的提取文件资料，并转换为json。" />
        </el-form-item>
        <el-form-item v-if="formData.strategy=='ai_paragraph'" label="智能分段AI">
          <el-select v-model="formData.modelId" placeholder="请选择模型" clearable>
            <el-option
              v-for="model in models"
              :key="model.id"
              :label="model.name"
              :value="model.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item v-if="formData.strategy=='ai_paragraph'" label="提示词">
          <el-input
            type="textarea"
            v-model="formData.prompt"
            :autosize="{ minRows: 3, maxRows: 5 }"
            @mousedown.stop
          />
        </el-form-item>
        <el-form-item v-if="formData.strategy=='ai_paragraph'" label="json案例">
          <el-input
            type="textarea"
            v-model="formData.jsonTemp"
            :autosize="{ minRows: 3, maxRows: 5 }"
            @mousedown.stop
          />
        </el-form-item>
        <el-form-item label="最大token数" v-if="formData.strategy=='paragraph'">
          <el-input-number style="width: 100%" v-model="formData.maxToken" :step="1" :min="500"/>
        </el-form-item>
        <el-form-item label="KEY" v-if="formData.strategy=='paragraph'">
          <el-input v-model="formData.key"/>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<style scoped lang="scss">

</style>
